<template>
  <view class="login-bg">
    <!-- 顶部蓝色背景和插画 -->
    <view class="login-header">
      <view class="login-title">您好，</view>
      <view class="login-subtitle">欢迎登录车联网服务！</view>
      <image class="login-illustration" src="/static/yyq/login_car.png" mode="widthFix" />
    </view>
    <!-- 底部白色内容区 -->
    <view class="login-card-wrap">
      <view class="login-card">
        <input placeholder="手机号登陆" class="login-input" />
        <view class="login-row">
          <input placeholder="输入验证码" class="login-input" style="flex:1;" />
          <button class="code-btn">获取验证码</button>
        </view>
        <button class="login-btn">登录</button>
      </view>
    </view>
    <!-- 位置弹窗（底部弹出，只遮挡白色内容区） -->
    <view v-if="showLocationModal" class="drawer-mask">
      <view class="drawer-container">
        <view class="modal-title">获取你的位置信息</view>
        <view class="modal-content">你的位置信息将用于获取你附近的站点</view>
        <view class="modal-actions">
          <button class="btn-cancel" @click="handleLocation(false)">拒绝</button>
          <button class="btn-allow" @click="handleLocation(true)">允许</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showLocationModal: true
    };
  },
  methods: {
    handleLocation(allow) {
      this.showLocationModal = false;
      // 这里可以根据allow做后续处理
    }
  }
}
</script>

<style lang="scss">
.login-bg {
  min-height: 100vh;
  background: linear-gradient(180deg, #338aff 0%, #338aff 220px, #fff 220px, #fff 100%);
}
.login-header {
  padding-top: 48px;
  padding-bottom: 24px;
  text-align: left;
  position: relative;
}
.login-title {
  font-size: 32px;
  color: #fff;
  font-weight: bold;
  margin-left: 32px;
  margin-bottom: 8px;
}
.login-subtitle {
  font-size: 22px;
  color: #fff;
  margin-left: 32px;
  margin-bottom: 16px;
}
.login-illustration {
  position: absolute;
  right: 32px;
  top: 24px;
  width: 160px;
  height: auto;
}
.login-card-wrap {
  margin-top: -32px;
  padding: 0 0 0 0;
}
.login-card {
  background: #fff;
  border-radius: 32px 32px 0 0;
  padding: 48px 24px 0 24px;
  min-height: 400px;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.04);
}
.login-input {
  width: 100%;
  margin-bottom: 24px;
  padding: 12px 0;
  border: none;
  border-bottom: 1px solid #eee;
  font-size: 18px;
  color: #888;
  background: none;
}
.login-row {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}
.code-btn {
  margin-left: 12px;
  background: #5c9eff;
  color: #fff;
  border: none;
  border-radius: 20px;
  font-size: 16px
}
.login-btn {
  width: 80%;
  background: linear-gradient(90deg, #5c9eff 0%, #005be4 100%);
  color: #fff;
  border: none;
  border-radius: 32px;
  font-size: 16px;
  margin-top: 10px;
}
.drawer-mask {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  top: unset;
  background: rgba(0,0,0,0.01);
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.drawer-container {
  width: 100vw;
  background: #fff;
  border-radius: 24px 24px 0 0;
  padding: 32px 24px 24px 24px;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.08);
  text-align: center;
  animation: slideUp 0.3s cubic-bezier(.25,.8,.25,1);
}
@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.modal-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 12px;
}
.modal-content {
  color: #888;
  font-size: 14px;
  margin-bottom: 24px;
}
.modal-actions {
  display: flex;
  justify-content: space-between;
}
.btn-cancel {
  background: #e0e0e0;
  color: #666;
  border: none;
  border-radius: 8px;
  padding: 8px 32px;
  margin-right: 12px;
}
.btn-allow {
  background: #448aff;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 32px;
}
</style>
